<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/reg.css">
    <style>

    </style>
</head>

<body>
    <div class="root">
        <div class="register-phone">
            <div class="mi-layout">
                <div class="mi-layout-sider">
                    <img src="https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.5b1efcd8.jpg"
                        alt="">
                </div>
                <div class="mi-layout-container">
                    <div class="mi-layout-header">
                        <div class="mi-layout-logo">
                            <h1></h1><img src="../images/Xiaomi_logo.png" alt=""></h1>
                            <h2>小米帐号</h2>
                        </div>
                        <ul class="mi-layout-nav">
                            <li><a href="">用户协议</a></li>
                            <li><a href="">隐私政策</a></li>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">中文(简体)</a></li>
                        </ul>
                    </div>
                    <!-- <div class="mi-layout-mid mi-layout-mid-reg">
                        <div class="mi-layout-cord">
                            <div class="ant-tabs-nav">
                                <h3><a href="">登录</a></h3>
                                <h3><a class="ant-tabs-nav-on" href="">注册</a></h3>
                            </div>
                            <div class="mi-from-phone">
                                <div class="mi-from-phone-left">
                                    <select>
                                        <option value="+86">+86</option>
                                    </select>
                                </div>
                                <div class="mi-from-phone-ringht">
                                    <input type="text" placeholder="手机号">
                                </div>
                            </div>

                            <div class="mi-from-pwd">
                                <input type="password" placeholder="密码">
                            </div>

                            <div class="mi-from-code">
                                <div class="mi-from-code-text">
                                    <input type="text" placeholder="请输入验证码">
                                </div>
                                <div class="mi-from-code-code">1234</div>
                                <div class="mi-from-code-btn">
                                    <button>获取验证码</button>
                                </div>
                            </div>
                            <div class="mi-accept-terms">
                                <input type="checkbox">
                                <p>已阅读并同意小米帐号 <strong>用户协议</strong> 和 <strong>隐私政策</strong></p>
                            </div>
                            <div class="mi-button">
                                <button class="reg-btn">注册</button>
                            </div>
                            <div class="mi-from-actions">
                                <a href="">收不到验证码？</a>
                            </div>
                            <div class="mi-sns-login">
                                <div class="mi-sns-login-title">其他登录方式</div>
                                <ul class="mi-sns-login-content">
                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1157784725,3852603273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img0.baidu.com/it/u=1210664285,305400953&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=2119010768,2596446330&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=451"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1078970566,1032880499&fm=253&fmt=auto&app=138&f=PNG?w=233&h=234"
                                                alt="">
                                        </a></li>

                                </ul>
                            </div>
                        </div>
                    </div> -->

                    <div class="mi-layout-mid mi-layout-mid-login mi-layout-mid-on">
                        <div class="mi-layout-cord">
                            <div class="ant-tabs-nav">
                                <h3><a class="ant-tabs-nav-on href=">登录</a></h3>
                                <h3><a href="../html/Xiaomi_reg.html">注册</a></h3>
                            </div>
                            <div class="mi-from-user">
                                <input type="text" placeholder="邮箱/手机号码/小米ID" class="user-phone">
                                <span></span>

                            </div>
                            <div class="mi-from-pwd">
                                <input type="password" placeholder="密码" class="user-pwd">
                                <span></span>
                            </div>
                            <div class="mi-from-code">
                                <div class="mi-from-code-text">
                                    <input type="text" placeholder="请输入验证码" class="user-code">
                                    <span></span>
                                </div>
                                <div class="mi-from-code-code"></div>
                                <div class="mi-from-code-btn">
                                    <button>获取验证码</button>
                                </div>
                            </div>
                            <div class="mi-accept-terms">
                                <input type="checkbox" class="consent">
                                <p>已阅读并同意小米帐号 <strong>用户协议</strong> 和 <strong>隐私政策</strong></p>
                            </div>
                            <div class="mi-button">
                                <button class="reg-btn" disabled>登录</button>
                            </div>
                            <div class="mi-from-actions">
                                <p><a href="">忘记密码？</a></p>
                                <p><a href="">手机号登录</a></p>
                            </div>
                            <div class="mi-sns-login">
                                <div class="mi-sns-login-title">其他登录方式</div>
                                <ul class="mi-sns-login-content">
                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1157784725,3852603273&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img0.baidu.com/it/u=1210664285,305400953&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=2119010768,2596446330&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=451"
                                                alt="">
                                        </a></li>

                                    <li><a href="">
                                            <img src="https://img1.baidu.com/it/u=1078970566,1032880499&fm=253&fmt=auto&app=138&f=PNG?w=233&h=234"
                                                alt="">
                                        </a></li>

                                </ul>
                            </div>
                        </div>
                    </div>


                    <div class="mi-layout-copy">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</div>

                </div>
            </div>

        </div>
    </div>


    <div class="slide-box">
        <div class="hide-right"></div>
        <div class="hide-left"></div>
        <div class="slide">
            <div class="push"></div>
        </div>

    </div>



    <script src="../js/jq.js"></script>
    <script src="../js/code.js"></script>
    <script src="../js/promise_ajax.js"></script>
    <script>


        //滑动验证
        const oSlideBox = document.querySelector('.slide-box');
        const oHideR = document.querySelector('.hide-right');
        const oHideL = document.querySelector('.hide-left');
        const oPush = document.querySelector('.push');




        //手机号输入框
        const oUserPhone = document.querySelector('.user-phone');
        const oPhoneSpan = document.querySelector('.mi-from-user span');
        //密码输入框
        const oPwd = document.querySelector('.user-pwd');
        const oPwdSpan = document.querySelector('.mi-from-pwd span');
        //验证码输入框
        const oCode = document.querySelector('.user-code');
        const oCodeSpan = document.querySelector('.mi-from-code-text span');
        //验证码显示框
        const oCode_text = document.querySelector('.mi-from-code-code');
        //获取验证码按钮
        const oCode_btn = document.querySelector('.mi-from-code-btn button');
        //勾选
        const oConsent = document.querySelector('.consent');
        //登录按钮
        const oLogin_btn = document.querySelector('.mi-button button');

        // console.log(oUserPhone, oPwd, oCode, oCode_text, oCode_btn, oConsent, oLogin_btn);


        let flag1 = false;
        let flag2 = false;
        let flag3 = false;
        let flag4 = false;

        let PhoneVal;
        let PwdVal;
        oCode_text.innerHTML = code();
        // if (PhoneVal && PwdVal) {
        //     oLogin_btn.disabled = false;
        // }


        oUserPhone.onblur = function () {
            PhoneVal = oUserPhone.value;
            if (PhoneVal) {
                flag1 = true;
                oPhoneSpan.innerHTML = '';
                // console.log(flag1);
            }
        }
        oPwd.onblur = function () {
            PwdVal = oPwd.value;
            if (PwdVal) {
                flag2 = true;
                oPhoneSpan.innerHTML = '';
                // console.log(flag2);

            }
        }
        //获取验证码
        oCode_btn.onclick = function () {
            oCode_btn.disabled = true;
            oCode_btn.innerHTML = `10S`;
            let s = 10;
            let t_one = setInterval(() => {
                s--;
                if (s == 0) {
                    clearInterval(t_one);
                    oCode_btn.disabled = false;
                    oCode_btn.innerHTML = '获取验证码';
                }
                else {
                    oCode_btn.disabled = true;
                    oCode_btn.innerHTML = `${s}S`;
                }
            }, 1000)


            flag3 = false;
            oCode_text.innerHTML = code();
            oCode.value = '';
        }

        oCode.onblur = function () {
            if (oCode.value.toLowerCase() === oCode_text.innerHTML.toLowerCase()) {
                oCodeSpan.innerHTML = '';
                flag3 = true;
                oConsent.onclick = function () {

                    if (oConsent.checked) {
                        flag4 = true;
                        // console.log(flag1, flag2, flag3, flag4);
                        if (flag1 && flag2 && flag3 && flag4) {
                            oLogin_btn.disabled = false;
                            oLogin_btn.style.backgroundColor = '#ff6a00';

                            oLogin_btn.onclick = function () {
                                if (oCode.value.toLowerCase() === oCode_text.innerHTML.toLowerCase()) {
                                    if (PhoneVal && PwdVal) {
                                        // console.log(PhoneVal, PwdVal);
                                        login({
                                            userphone: `${PhoneVal}`,
                                            userpwd: `${PwdVal}`
                                        }).then(res => {
                                            const { status, msg } = res;
                                            console.log(res);
                                            if (status) {

                                                localStorage.setItem('xiaomi_xiaomi_', PhoneVal);
                                                oSlideBox.style.visibility = 'visible';
                                            }
                                            else {
                                                console.log(msg);
                                                oPhoneSpan.innerHTML = msg;
                                                oPhoneSpan.style.color = 'red';
                                            }
                                        })

                                    }
                                }


                            }









                        }
                    }
                    else {
                        flag4 = false;
                        oLogin_btn.disabled = true;
                        oLogin_btn.style.backgroundColor = '#ffbe99';
                    }
                }
            }
            else {
                oCodeSpan.innerHTML = '验证码错误';
                oCodeSpan.style.color = 'red';
            }

        }





        //滑动验证
        var maxX = oSlideBox.clientWidth - oHideR.offsetWidth;
        var maxY = oSlideBox.clientHeight - oHideR.offsetHeight * 2;

        //挖空的地方靠右边
        var minX = oSlideBox.clientWidth / 2;
        console.log(maxX, maxY, minX);

        randLocation();

        oPush.onmousedown = function (e) {
            var gapX = e.x;

            document.onmousemove = function (e) {
                var x = e.x - gapX;
                if (x < 0) x = 0;
                if (x > maxX) x = maxX;
                oPush.style.left = x + 'px';
                oHideL.style.left = x + 'px';
            }
        }


        document.onmouseup = async function () {
            document.onmousemove = null;
            if (parseInt(oPush.style.left) != 0) {
                if (Math.abs(parseInt(oHideL.style.left) - parseInt(oHideR.style.left)) <= 5) {

                    const url = location.search;
                    if (url) {
                        const newURL = url.replace('?accURL=', '');
                        console.log(newURL)
                        location.href = newURL;
                    }
                    else {
                        location.href = './Xiaomi_index.html';
                    }
                }
                else {
                    randLocation()
                }
            }
        }

        function randLocation() {

            var x = rand(minX, maxX);
            var y = rand(0, maxY);

            oHideR.style.cssText = `left:${x}px;top:${y}px`;
            oHideL.style.cssText = `top:${y}px;background-position:-${x}px -${y}px;`;
            oPush.style.left = 0;
        }

        //随机数
        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }


    </script>



</body>

</html>